import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  Image,
  TouchableOpacity,
  ScrollView,
  SafeAreaView,
} from 'react-native';
import {
  mainBgColorWhite,
  px2dp,
} from '@/styles';
import { Button, _, msg } from '@/common';

import { getGoodsBrand } from '@/api/truck';
import { iconCertRight, leftBack } from '@/images';
import XmList from '../../components/XmList';
import RechargeHeader from '../../components/RechargeHeader';
/*
 * @Author: luoyunhai
 * @Date: 2020-08-17 10:00:00
 * @LastEditors: kanglang
 * @LastEditTime: 2020-10-19 11:05:32
 * @Description: 货车品牌
 */
export default class OrderConfirm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      brandData: [],
      isLoading: true,
      showFoot: 1, // 控制foot， 0：隐藏footer  1：已加载完成,没有更多数据   2 ：显示加载中
    };
  }

  componentDidMount() {
    this.init();
  }

  toBrandList(data) {
    msg.emit('router: goToNext', {
      routeName: 'FourBrandList',
      data
    });
  }

  getGoodsBrand() {
    let parame = {
      gcCode: 'car'
    };
    getGoodsBrand(parame).then(res => {
      if (res.success) {
        this.setState({
          isLoading: false,
          brandData: res.data
        });
      }
    });
  }

  render() {
    const { brandData, isLoading, showFoot } = this.state;
    const renderItem = ({ item }) => {
      return (
        <TouchableOpacity onPress={() => this.toBrandList(item)}>
          <View style={styles.carTypeImgWrap}>
            <Text style={styles.brands}>
              {item.name}
              专区
            </Text>
            <View style={styles.iconWrap}>
              <Text style={styles.seeText}>点击查看</Text>
              <Image
                style={styles.rightIcon}
                source={iconCertRight}
                resizeMode='contain'
              />
            </View>
            <Image
              style={styles.carTypeImg}
              source={{ uri: item.picFileId ? item.picFileId : '' }}
              resizeMode='stretch'
            />
          </View>
        </TouchableOpacity>
      );
    };
    return (
      <SafeAreaView style={{ flex: 1 }}>
        {/* <RechargeHeader
          leftBackIcon={leftBack}
          rechargeIcon={require('../../images/icons/car-header-back-word.png')}
          leftBackStyle={{ backgroundColor: '#E6E6E5' }}
        /> */}
        <ScrollView>
          <XmList
            sources={brandData}
            renderItem={renderItem}
            isLoading={isLoading}
            onDropdownRefresh={() => this.getGoodsBrand()}
            singleKey={item => item.id}
          />
        </ScrollView>
      </SafeAreaView>
    );
  }

  // 初始化
  init = () => {
    this.getGoodsBrand();
  };
}
const styles = StyleSheet.create({
  container: {
    paddingTop: px2dp(30)
  },
  carTypeImgWrap: {
    marginBottom: px2dp(20),
    marginLeft: px2dp(30),
    marginRight: px2dp(30)
  },
  carTypeImg: {
    width: '100%',
    height: px2dp(360),
  },
  brands: {
    zIndex: 1,
    position: 'absolute',
    left: px2dp(50),
    top: px2dp(80),
    fontSize: px2dp(20),
    fontWeight: 'bold',
    color: mainBgColorWhite,
  },
  iconWrap: {
    flexDirection: 'row',
    alignItems: 'center',
    zIndex: 1,
    position: 'absolute',
    left: px2dp(50),
    top: px2dp(160),
    fontSize: px2dp(20),
    backgroundColor: 'rgba(0,0,0,0.2)',
    paddingTop: px2dp(2),
    paddingBottom: px2dp(2),
    paddingLeft: px2dp(22),
    paddingRight: px2dp(22),
    borderRadius: px2dp(40)
  },
  seeText: {
    color: mainBgColorWhite,
    fontSize: px2dp(10)
  },
  rightIcon: {
    width: px2dp(8),
    marginLeft: px2dp(4)
  }

});
